<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="$t('ToolingOn')"
    width="1100px">
    <dynForm
      ref="dataForm"
      :info-form="searchForm"
      :select-list="selectList"
      :search-tags="searchTags">
      <template slot="prepend">
        <el-form-item
          :rules="[{ required: true, message: `${$t('pleaseInput')}${$t('toolingBarcode')}`, trigger: 'blur' }]"
          :label="$t('toolingBarcode')"
          prop="toolingBarcode"
        >
          <el-input
            v-model.trim="searchForm.toolingBarcode"
            :placeholder="`${$t('pleaseInput')}${$t('toolingBarcode')}`"
            clearable
            @keyup.enter.native="getEnterInfos"/>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: `${this.$t('pleaseScan')}${this.$t('eqpName')}`, trigger: 'blur' }]"
          :label="$t('eqpName')"
          prop="eqpId"
        >
          <el-input
            v-model="searchForm.eqpId"
            :placeholder="`${$t('pleaseScan')}${$t('eqpName')}`"
            clearable
            @blur="getEqpInfo"
            @keyup.enter.native="getEqpInfo"/>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: `${this.$t('pleaseSelect')}Head`, trigger: 'change' }]"
          label="Head"
          prop="headId"
        >
          <el-select
            v-model="searchForm.headId"
            placeholder=" "
            filterable
            clearable>
            <el-option
              v-for="item in headIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </template>
    </dynForm>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button :loading="loading" type="primary" icon="el-icon-receiving" @click="doSave">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import toolingApi from '@/api/Tooling/toolingBasicInfo'
import { getSiteIdList } from '@/api/equipment/eqpbase'
import { toolingOn } from '@/api/Tooling/toolingOnOffRecord'
export default {
  name: 'ToolingOn',
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        headId: 1
      },
      loading: false,
      lendEqpId: '',
      selectList: {},
      headIdList: [],
      searchTags: Object.freeze(
        [
          { label: this.$t('toolingType'), prop: 'toolingType', tag: 'DynInput', readonly: true },
          { label: this.$t('toolingModel'), prop: 'toolingModel', tag: 'DynInput', readonly: true },
          { label: this.$t('currentTime'), prop: 'usedTime', tag: 'DynInput', readonly: true },
          { label: this.$t('lifeTime'), prop: 'lifeTime', tag: 'DynInput', readonly: true },
          { label: this.$t('remark'), prop: 'remark', tag: 'DynTextarea', row: 3, maxlength: '200', show_word_limit: true,
            width: '100%', readonly: true }
        ]
      )
    }
  },
  methods: {
    doSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          toolingOn(this.$clearNull(this.searchForm)).then(res => {
            this.$betterTips(res, this.handleUpdate, this.handleClose)
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    getEnterInfos(e) {
      toolingApi
        .getToolingInfo({ toolingBarcde: e.target.value, actionType: 6 }).then(res => {
          if (res.code === 1) {
            this.lendEqpId = res.data.eqpId
            res.data.eqpId = ''
            this.searchForm = Object.assign({}, res.data, { headId: 1 })
          } else {
            this.$betterTips(res)
          }
        })
    },
    getEqpInfo(e) {
      if (e.target.value !== this.lendEqpId) {
        this.$notify({
          message: `${this.$t('EqpNoMatch')}`,
          type: 'warning'
        })
        return
      }
      getSiteIdList({ eqpName: e.target.value }).then(res => {
        if (res.code === 1) {
          this.headIdList = res.data
        } else {
          this.$betterTips(res)
        }
      })
    },
    async handleOpen() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    .el-form-item__content{
      width: 60%;
      .el-select {
        width: 100%;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
</style>
